<template>
  <div class="video-player" :id="playerId">
    <video
      ref="videoRef"
      :src="videoUrl"
      :autoplay="autoplay"
      :loop="loop"
      :controls="controls"
      :muted="muted"
      :poster="poster"
      :preload="preload"
      :playsinline="playsinline"
      @play="$emit('play')"
      @pause="$emit('pause')"
      @ended="$emit('ended')"
      @error="handleError"
      @loadedmetadata="handleReady"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const props = defineProps({
  videoId: {
    type: String,
    required: true,
  },
  videoUrl: {
    type: String,
    required: true,
  },
  poster: {
    type: String,
    default: '',
  },
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '100%',
  },
  // 自动播放
  autoplay: {
    type: Boolean,
    default: false,
  },
  // 循环播放
  loop: {
    type: Boolean,
    default: false,
  },
  // 控制器
  controls: {
    type: Boolean,
    default: true,
  },
  // 静音
  muted: {
    type: Boolean,
    default: false,
  },
  // 预加载
  preload: {
    type: String,
    default: 'auto',
  },
  // 播放内联
  playsinline: {
    type: Boolean,
    default: true,
  },
  // 播放内联
  playsinline: {
    type: Boolean,
    default: true,
  },
})

const emit = defineEmits(['ready', 'play', 'pause', 'ended', 'error'])

const videoRef = ref(null)
const playerId = props.videoId

// 处理视频加载完成
const handleReady = () => {
  emit('ready', videoRef.value)
}

// 处理视频错误
const handleError = (e) => {
  console.error('视频播放错误:', e)
  emit('error', e)
}
onBeforeUnmount(() => {
  // 在组件卸载时暂停视频
  videoRef.value?.pause()
})
// 暴露播放器方法和引用
defineExpose({
  videoRef: videoRef.value,
  play: () => videoRef.value?.play(),
  pause: () => videoRef.value?.pause(),
  replay: () => {
    if (videoRef.value) {
      videoRef.value.currentTime = 0
      videoRef.value.play()
    }
  },
  seek: (time) => {
    if (videoRef.value) {
      videoRef.value.currentTime = time
    }
  },
  getCurrentTime: () => videoRef.value?.currentTime || 0,
  getDuration: () => videoRef.value?.duration || 0,
  getVolume: () => videoRef.value?.volume || 0,
  setVolume: (vol) => {
    if (videoRef.value) {
      videoRef.value.volume = Math.max(0, Math.min(1, vol))
    }
  },
})
</script>

<style scoped>
.video-player {
  width: v-bind(width);
  height: v-bind(height);
  background-color: #000;
  position: relative;
  overflow: hidden;
}

video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 移动端样式优化 */
@media (max-width: 768px) {
  video::-webkit-media-controls-fullscreen-button {
    display: none;
  }

  video::-webkit-media-controls-play-button {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
  }

  video::-webkit-media-controls-timeline {
    border-radius: 10px;
  }

  video::-webkit-media-controls-current-time-display,
  video::-webkit-media-controls-time-remaining-display {
    color: #fff;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  }
}
</style>
